extends htmldjango
extends mui
extends boot4
extends javascript
extends fn_mui

snippet meta.mob
	<meta name="viewport" content="width=device-width, initial-scale=1.0,
				minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
snippet meta.mob.all
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="misapplication-tap-highlight" content="no"/>
	<meta name="HandheldFriendly" content="true"/>
	<meta name="MobileOptimized" content="320"/>
snippet css.b4
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" type="text/css" >
snippet css.b3
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" >
snippet css.ico.awe
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" >
snippet css.ico.mat
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
snippet css.ico.mdi
	<link rel="stylesheet" href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css">
snippet js.b4
	<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
snippet js.jq1
	<script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
snippet js.jq2
	<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
snippet js.jq3
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
snippet js.snap
	<script src="/jslib/snap.svg-min.js"></script>
snippet js.vue
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
snippet js.vue-router
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
snippet js.vue-resource
	<script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script>

snippet :
	style="$1;"
# =============== django tags =========================
snippet d.url
	{%url '$1'%}

snippet d.blk
	{% block ${1:content} %}
	{% endblock %}

snippet d.cm
	{% comment %}
	{% endcomment %}

snippet d.ex
	{% extends '${1:base.html}' %}

snippet d.for
	{%for $1 in $2%}
		$0
	{%endfor%}

# ============ bootstrap grid System  ===============
snippet b.con
	<div class="container">
		<div class="row">
			$1
		</div>
	</div>
snippet b.4
	<div class="col-xs-${3:$1} col-sm-${2:$1} col-md-${1:4}">
		$6
	</div>
snippet b.$1
	<div>$1</div>
snippet b.xs
	<div class="col-xs-$1">
		$2
	</div>
snippet b.sm
	<div class="col-sm-$1">
		$2
	</div>
snippet b.md
	<div class="col-md-$1">
		$2
	</div>
snippet b.lg
	<div class="col-lg-$1">
		$2
	</div>
snippet b.xl
	<div class="col-xl-$1">
		$2
	</div>
snippet offset
	col-$1-offset-$2
snippet xs
	col-xs-$1
snippet sm
	col-sm-$1
snippet md
	col-md-$1
snippet lg
	col-lg-$1
snippet xl
	col-xl-$1
# =============== login&logout =====================
snippet d.login
	{% block content %}

	{% if form.errors %}
	<p class="error">Sorry, that's not a valid username or password</p>
	{% endif %}

	<form action="" method="post">
	<label for="username">User name:</label>
	<input type="text" name="username" value="" id="username">
	<label for="password">Password:</label>
	<input type="password" name="password" value="" id="password">

	<input type="submit" value="login" />
	<input type="hidden" name="next" value="{{ next|escape }}" />
	</form>

	{% endblock %}
# =============== slider bootstrap =====================
snippet b.range
	<input id="${1:ex1}" data-slider-id='ex1Slider' type="text"
		data-slider-min="${2:0}"
		data-slider-max="${3:20}"
		data-slider-step="${4:1}"
		data-slider-value="${5:14}"/>
	<script>
		var slider = new Slider('#$1', {
			formatter: function(value) {
				return 'Current value: ' + value;
			}
		});
	</script>
snippet b.range2
	<input id="${1:ex2}" type="text" class="span2" value=""
		data-slider-min="${2:10}"
		data-slider-max="${3:1000}"
		data-slider-step="${4:5}"
		data-slider-value="[${5:250},${6:450}]"/>
	<script> var slider = new Slider('#$1', {}); </script>

